<template>
  <div class="view">
    <div v-for="(item,index) in info"><item :name="item.name" :url="item.url"></item></div>
  </div>
</template>

<script>
  import Item from "./Item.vue"
  export default {
    name: "Right",
    data(){
      return {
        info:[
          {name:"专栏",url:new URL("@/assets/img/category-right/zhuanlan.svg", import.meta.url)},
          {name:"活动",url:new URL("@/assets/img/category-right/activity.svg", import.meta.url)},
          {name:"小黑屋",url:new URL("@/assets/img/category-right/tianping.svg", import.meta.url)},
          {name:"直播",url:new URL("@/assets/img/category-right/zhibo.svg", import.meta.url)},
          {name:"课堂",url:new URL("@/assets/img/category-right/class.svg", import.meta.url)},
          {name:"音乐",url:new URL("@/assets/img/category-right/music.svg", import.meta.url)},
        ]
      }
    },
    components:{
      Item
    }
  }
</script>

<style scoped>
.view{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}
  .view div{
    flex: 0 0 33%;
  }
</style>